<template>
  <div class="bone-padding-10">
        <el-row style="margin-top:10px; margin-bottom: 20px;">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item>系统管理2</el-breadcrumb-item>
                    <el-breadcrumb-item>权限列表</el-breadcrumb-item>
                </el-breadcrumb>
        </el-row>
        <el-row :gutter="10">
            <el-col :span='4'>
                <el-button type="primary" size="small" @click='addMenu'>新增权限</el-button>
            </el-col>
            <el-col :span='6' v-show='!form.isShow'>
                <el-input size="small"
                    placeholder="请输入标题或者tag"
                    suffix-icon="el-icon-search"
                    v-model="table.queryKey"
                    @keyup.enter.native="getTableData"
                    >
                </el-input>
            </el-col>
        </el-row>
        <el-row class="bone-top-10" :gutter="10">
            <el-col :span='4'>
                <el-card>
                    <div slot='header'>
                        <span>权限列表</span>
                    </div>
                        <div>
                            <el-tree :data='tree.treeData' :props="tree.defaultProps" @node-click="treeNodeClick"></el-tree>
                        </div>
                </el-card>
            </el-col>
            <el-col :span='20'  v-show='!form.isShow'>
                <el-table :data='table.tableData'
                    border stripe style="width:100%" size="small"
                    :highlight-current-row="true"
                    ref="multipleTable"
                >
                    <el-table-column label='编号' prop="menuId" width="80"></el-table-column>
                    <el-table-column label='名称' prop="name"></el-table-column>
                    <el-table-column label='类型' prop="type" width="80">
                        <template slot-scope='scope'>
                            <el-tag v-if='scope.row.type==1'>目录</el-tag>
                            <el-tag v-if='scope.row.type==2' type="warning">菜单</el-tag>
                            <el-tag v-if='scope.row.type==3' type="success">按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label='标识' prop="tag" width="200" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label='地址' prop="url" width="150" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label='图标' prop="icon" width="80">
                        <template slot-scope='scope'>
                            <span v-if='scope.row.icon' style="font-size:20px;">
                                <i :class="scope.row.icon"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label='是否可用' prop="usable" width="80">
                        <template slot-scope='scope'>
                            <span style="font-size:20px;">
                                <i v-if='scope.row.usable==1' class="el-icon-check"></i>
                                <i v-else class="el-icon-close"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label='父权限' prop="pname"></el-table-column>
                    <el-table-column label='排序' prop="orderNum" width="80"></el-table-column>
                    <el-table-column label='创建时间' prop="createTime" width="140" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label='操作' fixed="right" width="150">
                        <template slot-scope='scope'>
                            <el-button type="text" @click="modifyMenu(scope.row)">修改</el-button>
                            <el-button type="text" @click='disable(scope.row.menuId)' v-if='scope.row.usable==1'>禁用</el-button>
                            <el-button type="text" @click='usable(scope.row.menuId)' v-if='scope.row.usable==0'>启用</el-button>
                            <el-button type="text" @click='toDel(scope.row.menuId)' v-if='scope.row.usable==0'>删除</el-button>
                            
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class='bone-top-10 my-el-pagination'
                @current-change="handleCurrentChange"
                :current-page="this.table.currentPage"
                :page-size="this.table.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="this.table.rowCount"
                ></el-pagination>
            </el-col>
            <el-col :span='8' v-show='form.isShow'>
                <el-card>
                    <div slot='header'>
                        <span>{{form.formTitle}}</span>
                    </div>
                    <el-form :model='form' :rules='form.rules' ref='form' 
                    size='small' label-width="80px" label-position="right">
                        <el-form-item label='权限名称' prop="name">
                            <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                        </el-form-item>
                        <el-form-item label='权限标识' prop="tag">
                            <el-input v-model="form.tag" placeholder="请输入标识"></el-input>
                        </el-form-item>
                        <el-form-item label='权限类型' prop="type">
                            <el-select v-model.number="form.type" placeholder="请选择类型" style="width:100%">
                                <el-option v-for="item in form.typeItems" :key="item.typeId" :label="item.typeName" :value="item.typeId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='页面url' prop="url">
                            <el-input v-model="form.url" placeholder="请输入url"></el-input>
                        </el-form-item>
                        <el-form-item label='权限图标' prop="icon">
                            <el-input v-model="form.icon" placeholder="请输入图标"></el-input>
                        </el-form-item>
                        <el-form-item label='父权限' prop="pname">
                            <el-input v-model="form.pname" placeholder="请选择父菜单"></el-input>
                        </el-form-item>
                        <el-form-item label='排序' prop="orderNum">
                            <el-input-number :min='1' :max='50' v-model="form.orderNum" @change='orderNumChange' style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="submitForm('form')" type="primary" :disabled='form.submitDisabled'>保存</el-button>
                            <el-button @click="goBack()" type="primary">返回</el-button>
                        </el-form-item>
                    
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
  </div>
</template>
<script>
import Http from "@/components/utils/httpUtil2";
export default {
    data(){
        return {
            //树结构
            tree: {
                treeData: [],
                defaultProps: {
                    children: "children",
                    label: "name"
                },
            },
            //table表
            table: {
                tableData: [],
                pageSize: 10,
                currentPage: 1,
                rowCount: 0,
                queryKey: ''
            },
            //添加,修改的form表单
            form: {
                isShow: false,
                formTitle: '',
                menuId: '',
                name: '',
                type: '',
                tag: '',
                url: '',
                icon: '',
                usable: '',
                pname: '',
                pid: '',
                orderNum: 1,
                typeItems: [
                    {
                        typeId: 1,
                        typeName: "目录"
                    },
                    {
                        typeId: 2,
                        typeName: "菜单"
                    },
                    {
                        typeId: 3,
                        typeName: "按钮"
                    }
                ],
                isCreate: true,
                submitDisabled: false,
                rules: {
                    name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                    tag: [{ required: true, message: "请输入标识", trigger: "blur" }],
                    type: [
                        {
                            required: true,
                            message: "请选择类型",
                            trigger: "change",
                            type: "number"
                        }
                    ]
                }
            }
        }
    },
    methods: {
        //添加权限
        addMenu(){
            this.form.isShow = true;
            this.form.formTitle = '新增权限'
            this.form.submitDisabled = false;
            this.form.menuId = ''
            this.form.name = ''
            this.form.type = ''
            this.form.tag = ''
            this.form.url = ''
            this.form.icon = ''
            this.form.usable = 1
            this.form.pid = 0
            this.form.pname = ''
            this.form.orderNum = 1
            this.form.isCreate = true
        },
        //修改权限
        modifyMenu(row){
            this.form.isShow = true;
            this.form.formTitle = '修改权限'
            this.form.submitDisabled = false;
            this.form.menuId = row.menuId
            this.form.name = row.name
            this.form.type = row.type
            this.form.tag = row.tag
            this.form.url = row.url
            this.form.icon = row.icon
            this.form.usable = row.usable
            this.form.pid = row.pid
            this.form.pname = row.pname
            this.form.orderNum = row.orderNum
            this.form.isCreate = false
        },

        //禁用权限
        disable(menuId){
            let p = {};
            p.menuId = menuId;
            Http.fetch('/menu/disable',p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTreeData();
                this.getTableData();
            });
        },

        //启用权限
        usable(menuId){
            let p = {};
            p.menuId = menuId;
            Http.fetch('/menu/usable',p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTreeData();
                this.getTableData();
            });
        },

        //删除权限
        toDel(menuId){
            let p = {};
            p.menuId = menuId;
            Http.fetch('/menu/delete',p)
            .then(res=>{
                this.$message({
                    showClose: true,
                    message: res.sucMsg,
                    type: "success"
                });
                this.getTreeData();
                this.getTableData();
            });
        },

        //权限树点击事件
        treeNodeClick(data){
            this.form.pid = data.menuId
            this.form.pname = data.name
        },
        //生成树结构
        createTree(data,pid){
            pid = pid || 0;
            let list = [];
            
            data.map(item => {
                if (item.pid == pid) {
                    item.children = this.createTree(data,item.menuId);
                    list.push(item);
                }
            });
            return list;
        },
        //从后台获取权限树的数据
        getTreeData(){
            let p = {};
            Http.fetch('/menu/listAll',p)
            .then(res=>{
                let tdata = this.createTree(res.data,0);
                this.tree.treeData = tdata;
            })
        },
        //table翻页
        handleCurrentChange(val){
            this.table.currentPage = val;
            this.getTableData();
        },
        //table获取数据
        getTableData(){
            let p = {};
            p.start = (this.table.currentPage - 1)*this.table.pageSize;
            p.num = this.table.pageSize;
            p.key = this.table.queryKey;
            Http.fetch('/menu/listQuery',p)
            .then(res=>{
                this.table.tableData = res.data.rows;
                this.table.rowCount = res.data.total;
            })
        },
        //提交表单
        submitForm(formName){
            this.$refs[formName].validate(valid=>{
                if(valid){
                    //禁用按钮
                    this.form.submitDisabled = true;

                    let url = '';
                    let p = {}
                    //新创建
                    if(this.form.isCreate){
                        url = '/menu/add';
                    }
                    //修改
                    else{
                        url = '/menu/modify'
                        p.menuId = this.form.menuId;
                    }
                    p.name = this.form.name;
                    p.tag = this.form.tag;
                    p.url = this.form.url;
                    p.pid = this.form.pid;
                    p.orderNum = this.form.orderNum;
                    p.icon = this.form.icon;
                    p.type = this.form.type;
                    Http.fetch(url,p)
                    .then(res=>{
                        this.$message({
                            showClose: true,
                            message: res.sucMsg,
                            type: "success"
                        });
                        this.form.submitDisabled = false;
                        this.form.isShow = false;
                        this.getTreeData();
                        this.getTableData();
                    })
                    .catch(err => {
                        this.submitDisabled = false;
                    });
                }
            })
        },
        //返回table页面
        goBack(){
            this.form.isShow = false;
        },
        //orderNum改变
        orderNumChange(val){
            let num = parseInt(val);
            this.form.orderNum = num;
        }
    },
    mounted(){
        this.getTreeData();
        this.getTableData();
    }
}
</script>
<style scoped>
.my-el-pagination {
  text-align: right;
}
</style>

